<template>
  <div class="pinjia">
    <GongYong></GongYong>
    <main>
      <div class="conter_tar">
        <div class="tar">
          <p>时间选择：</p>
          <el-link :underline="false">全部</el-link>
          <el-link :underline="false">今天</el-link>
          <el-link :underline="false">昨天</el-link>
          <el-link :underline="false">最近7天</el-link>
          <el-link :underline="false">最近30天</el-link>
          <el-link :underline="false">本月</el-link>
          <el-link :underline="false">本年</el-link>
        </div>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
      </div>
      <div class="conter_inp">
        <div class="conter_pin">
          <p>评价状态：</p>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="inppt">
          <p>规格搜索：</p>
          <el-input v-model="input" placeholder="请输入商品规格"></el-input>
          <el-button type="info" plain icon="el-icon-search" @click="kwywor"></el-button>
        </div>
        <div class="inppt">
          <p>规格搜索：</p>
          <el-input v-model="input" placeholder="请输入商品规格"></el-input>
          <el-button type="info" plain icon="el-icon-search" @click="kwywor"></el-button>
        </div>
      </div>
      <el-button type="primary" @click="add()">添加虚拟评论</el-button>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="商品信息" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户名称" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品评价" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="服务评分" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="评分内容" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="回复内容" :label-width="formLabelWidth">
            <el-input v-model="form.word" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="评价时间" :label-width="formLabelWidth">
            <el-input v-model="form.tel" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addLis()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 表格 -->
      <div class="tager">
        <el-table
          ref="singleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column type="index" label="ID" width="50"></el-table-column>
          <el-table-column property="title" label="商品信息" show-overflow-tooltip></el-table-column>
          <el-table-column property="name" label="用户名称" show-overflow-tooltip></el-table-column>
          <el-table-column property="price" label="商品评价" show-overflow-tooltip></el-table-column>
          <el-table-column property="price" label="服务评分" show-overflow-tooltip></el-table-column>
          <el-table-column property="price" label="评分内容" show-overflow-tooltip></el-table-column>
          <el-table-column property="price" label="回复内容" show-overflow-tooltip></el-table-column>
          <el-table-column property="tel" label="评价时间" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope" show-overflow-tooltip>
              <el-button
                @click.native.prevent="edit(scope.row, tableData)"
                type="text"
                size="small"
              >回复</el-button>
              <el-button @click.native.prevent="deletae(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        ></el-pagination>
      </div>
    </main>
  </div>
</template>

<script>
import GongYong from "./gongyong";
import axios from "axios";
export default {
  name: "Pinjia",
  components: {
    GongYong,
  },
  data() {
    return {
      value1: "",
      tableData: [],
      total: 2, //总页
      currentPage: 1, //初始页
      pagesize: 5, //每页数据
      options: [
        {
          value: "选项1",
          label: "请选择评价状态",
        },
        {
          value: "选项2",
          label: "已回复",
        },
        {
          value: "选项3",
          label: "未回复",
        },
      ],
      value: "",
      input: "",
      dialogFormVisible: false,
      form: {
        name: '',
        title: "",
        img: "https://img2.baidu.com/it/u=1894100898,4149033657&fm=11&fmt=auto&gp=0.jpg",
        word: "",
        price: "",
        tel: ""

      },
      formLabelWidth: '120px'
    };
  },
  created() {
    axios.get("getList").then((res) => {
      this.tableData = res.data.data;
      console.log(res.data.data);
    });
  },
  methods: {
    kwywor() {
      axios
        .get(`getList/?keyword=${this.input}`)
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    //删除
    deletae(id) {
      axios.delete(`delete/${id}`).then((res) => {
        this.$router.go("0");
      });
    },
    add() {
      this.dialogFormVisible = true
    },
    addLis() {
      axios.post("addList", { ...this.form }).then(res => {
        this.dialogFormVisible = false
        this.$router.go(0)
      })
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>

<style scoped lang="scss">
.pinjia {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  padding: 0 20px;
}
.tar {
  display: flex;
  align-items: center;
  a {
    padding: 7px 10px;
    border: 1px solid #ccc;
  }
}
.conter_tar {
  display: flex;
  padding: 10px 0;
}
.el-date-editor {
  margin: 0 20px;
}
.inppt {
  width: 350px;
  display: flex;
  align-items: center;
  p {
    width: 100px;
  }
}
.conter_pin {
  display: flex;
  align-items: center;
}
.conter_inp {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.el-button {
  // padding: 10px;
  margin: 10px 0;
}
.el-pagination {
  padding: 20px 0;
}
</style>